/*
*作者---王婷
*
*/
<template>
    <div class="sending">
        <div class="ordersBox">
            <div class="orders" v-for='(item,idx) in isSending.list'>
                <div class="orderHead">
                    <span class="stat">配送中</span>
                    <span class="lastTime">{{item.countTime}}</span>
                </div>
                <div class="detail"  v-for = "(orderItem,oidx) in item.orderItems">
                    <img :src="orderItem.thumbnail">
                    <div class='detailData'>
                        <p>{{orderItem.name}}</p>
                        <p>{{orderItem.intro}}</p>
                    </div>
                    <div class="num">
                        <h3>X{{orderItem.quantity}}</h3>
                    </div>
                </div>
                <div class="information">
                    <p class="infor1">
                        <span>{{item.receiverName}}</span>
                        <span>{{item.receiverPhone}}</span>
                    </p>
                    <p class='infor2'>{{item.receiverAreaName}}</p>
                </div>
                <div class="orderNum itm">
                    <span>订单号</span>
                    <span>{{item.orderSn}}</span>
                </div>
                <div class="time itm">
                    <span>配送时间</span>
                    <span>{{item.sendTime}}</span>
                </div>
                <div class="remark itm" v-if = 'item.intro'>
                    <span>订单备注</span>
                    <span>{{item.intro}}</span>
                </div>
                <div class="arrived" @click = 'sureArrive(item.orderId)'>
                    <span>确认送达</span>
                </div>
            </div>
        </div>
        <div class='empty' v-if='isEmpty'>
            <img src="./../../assets/com/empty.png">
            <p>暂无订单</p>
        </div>
        <div class='success' v-if = 'isSuccess'>
            <img src="./../../assets/com/success.png">
            <p>已送达</p>
        </div>
        <div class='loading' v-if='load'>
            <img  v-show = '!noMore' src="">
            <p v-show='noMore'>没有更多了</p>
        </div>
        <selfFooter></selfFooter>
    </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        curr:'send',
        isSending:'',
        isSuccess:false,
        isEmpty: false,
        page:1,
        load:false,
        noMore:false,
        params:{
            orderList:[]
        }
      }
    },
    methods:{
        sureArrive (id) {
            this.params.orderList = [id];
            this.postAjax('/order/remote/orderFinish',JSON.stringify(this.params),
            (res) => {
                if(res&&res.status == 200){
                    console.log('接单成功')
                    this.isSuccess = true;
                    let othis = this;
                    setTimeout(function(){
                        othis.isSuccess = false;
                    },2000);

                    this.isSending.list.forEach(function(item,idx){
                        if(item.orderId==id){
                            othis.isSending.list.splice(othis.isSending.list.indexOf(item),1)
                        }    
                    })
                }else{
                    m$.template({
                       val: '很抱歉,失败了,请稍后再试',
                       time: 1500
                    })
                }
              
            })
        },
        addPage (){
            this.load=true;
            this.page = parseInt(this.page + 1);
            this.getAjax('/order/remote/selectDispatchingByAdmin', {'orderStatus':2,'currentPage':this.page},
            (res) => {
                if(res&&res.status==200){
                    if(res&&res.data){
                        let othis = this;
                        if(this.isSending.length != 0){   
                            if(res.data.list.length !=0){
                                this.load = false;
                                res.data.list.forEach(function(item,index){
                                    //othis.isTaking.push({taking:false});
                                    othis.isSending.list.push(item);
                                })
                            }else{
                                this.noMore = true;
                                setTimeout(function(){othis.load=false;othis.noMore=false},1000)
                                //othis.add = false;
                                //console.log(othis.add);
                            }
                            //console.log(othis.isSending)    
                        }else{  
                            this.isSending = res.data;
                        }
                                  
                    }else{
                        m$.template({
                           val: '很抱歉,失败了,请稍后再试',
                           time: 1500
                        })
                    }
                }else{
                    m$.template({
                       val: '很抱歉,失败了,请稍后再试',
                       time: 1500
                    })
                } 
            });  
        }
    },
    created(){
         m$.documentTitle('送单');
        this.getAjax('/order/remote/selectDispatchingByAdmin', {'orderStatus':2,'currentPage':1},
        (res) => {
            if(res&&res.status==200){
                if(res.data){
                    if(res.data.list.length == 0){
                        this.isEmpty = true;
                    }
                    this.isSending = res.data;
                    //倒计时
                    if(this.isSending){
                        let othis = this;
                        if(this.isSending.admin.dispatchingType == 1 || this.isSending.admin.dispatchingType == 2){
                            setInterval(function(){
                                if(othis.isSending.list&&othis.isSending.list.length>0){
                                    var newList=[];
                                    othis.isSending.list.map(function(item,idx){
                                        var newItem=item;
                                        if(item.sendTime){
                                            
                                            var time = (Math.floor((new Date(item.sendTime.split('~')[0].replace(/\-/g,'/')).getTime() - new Date().getTime())/1000));
                                            if(time<=0){
                                                newItem['countTime'] = '已超时'
                                            }else{
                                                var d = Math.floor(time/24/3600);
                                                if(d<=0){
                                                    var h = Math.floor(time/3600);
                                                }else{
                                                    var h = Math.floor(time/3600 - d*24);
                                                }
                                                
                                                var m = Math.floor(time%3600/60);
                                                var s = Math.floor(time%3600%60);
                                                if(h<10){
                                                    h = '0'+h;
                                                }
                                                if(m<10){
                                                    m = '0'+ m;
                                                }
                                                if(s<10){
                                                    s = '0'+s;
                                                }
                                                if(d<=0){
                                                    newItem['countTime'] ='剩余时间: '+ h+':'+ m +':' +s;
                                                }else{
                                                    newItem['countTime'] ='剩余时间: '+ d +'天  '+ h+':'+ m +':' +s;
                                                }
                                            } 
                                        newList.push(newItem);
                                        }else{
                                            newList.push(newItem);
                                        }
                                    })
                                    othis.isSending.list=newList;
                                }
                            
                            },1000)
                        }
                    }
                }
            }else{
                m$.template({
                   val: '很抱歉,失败了,请稍后再试',
                   time: 1500
                })
            }   
        })    
    },
    mounted(){
        let othis = this;
        m$.scroll(function(){
            othis.addPage();
        }) 
              
    },
    components: {
        selfFooter: require('@/components/selfSupport/Footer')
    }
}
</script>
<style scoped lang="less">
   .sending{
        font-size: 0.3rem;
        background: #ececec;
        .ordersBox{
            margin-bottom: 1.2rem;
        }
        .orders {
            background:#ffffff;
            box-shadow:0px 2px 10px 0px rgba(179,179,179,0.50);
            margin-top: .22rem;
            .orderHead{
                padding: 0 .3rem;
                height: .8rem;
                line-height: .8rem;
                box-sizing: border-box;
                border-bottom:1px dashed #d3d3d3;
                // label{
                //     float: left;
                //     height:.4rem;
                //     >*{
                //         vertical-align: middle;
                //         display: inline-block;
                //     }
                //     img{
                //         width:.40rem;
                //         height:.40rem;
                //     }
                //     span{
                //         font-size: .3rem;
                //     }
                // }

                .lastTime{
                    float: right;
                    color: #f85c5c;
                }
            }
            .detail{
                padding: 0 .3rem;
                border-bottom:1px dashed #d3d3d3;
                height:1.8rem;
                div{
                    display: inline-block;
                }
                img{
                    width:1.3rem;
                    hight:1.3rem;
                    margin-top: .25rem;
                    float: left;
                    margin-right: .15rem;
                }
                .detailData{
                    width:4.77rem;
                    margin-top: .35rem;
                    p:nth-of-type(1){
                        font-size: .28rem;
                    }
                    p:nth-of-type(2){
                        font-size: .26rem;
                        color: #8d8d8d;
                    }
                }
                .num{
                    position: relative;
                    top:-8%;
                    z-index: 1;
                }
            }
            .information{
                padding: .25rem .3rem;
                border-bottom:1px solid #d3d3d3;
                .infor1{
                    font-size: .3rem;
                    padding-bottom: .1rem;
                    span:nth-of-type(1){
                        width:1.5rem;
                        display: inline-block;
                    }
                }
                .infor2{
                    font-size: .28rem;
                    color: #8f8f8f;
                }
            }
            .itm{
                padding: .25rem .3rem;
                border-bottom:1px solid #d3d3d3;
                font-size: .3rem;
                span:nth-of-type(1){
                    width:1.5rem;
                    display: inline-block;
                }
            }
            .arrived{
                height: 1.48rem;
                padding: .3rem .35rem;
                span{
                    color: white;
                    background:#000000;
                    border-radius:.12rem;
                    width:100%;
                    height:.88rem;
                    display: block;
                    text-align: center;
                    line-height: .88rem;
                }
            }
        }
        .success{
            background: #000;
            opacity: .7;
            width:1.5rem;
            height: 1.2rem;
            position: absolute;
            top:40%;
            left:0;
            right:0;
            margin:0 auto;
            color: #fff;
            z-index: 3;
            border-radius: .2rem;
            text-align: center;
            font-size: .16rem;
            img{
                width:40%;
                margin-top: .2rem;
            }
        }
        .empty{
            position: absolute;
            top:30%;
            left: 0;
            right:0;
            text-align: center;
            z-index: 4;
            font-size:.3rem;
            color:#a9a9a9;
            line-height:.3rem;
            img{
                width:1.4rem;
                height:1.4rem;
                margin-bottom: .15rem;
            }
        }
        .loading{
            display: inline-block;
            color: white;
            padding: 0.2rem 0.14rem;
            font-size: 0.28rem;
            text-align: center;
            background: rgba(0,0,0,0.71);
            border-radius: 0.1rem;
            max-width: 40%;
            min-width: 1.46rem;
            position: fixed;
            left: 40%;
            top: 50%;
            box-sizing: border-box;
            img{
                height:.5rem;
                vertical-align: middle;
            }
        }
   }
</style>